<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、Vue3介绍</h2>
  <div>在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题」</div>
  <br>
  <div>概览Vue3的新特性</div>
  <ul>
    <li>速度更快</li>
    <ul>
      <li>重写了虚拟Dom实现</li>
      <li>编译模板的优化</li>
      <li>更高效的组件初始化</li>
      <li>undate性能提高1.3~2倍</li>
      <li>SSR速度提高了2~3倍</li>
    </ul>
    <li>体积减少</li>
    <ul>
      <li>通过webpack的tree-shaking功能，可以将无用模块“剪辑”，仅打包需要的</li>
    </ul>
    <li>更易维护</li>
    <ul>
      <li>compositon Api</li>
      <li>可与现有的Options API一起使用</li>
      <li>灵活的逻辑组合与复用</li>
      <li>Vue3模块可以和其他框架搭配使用</li>
      <li>更好的Typescript支持</li>
      <li>编译器重写</li>
    </ul>
    <li>更接近原生</li>
    <ul>
      <li>可以自定义渲染 API</li>
    </ul>
    <li>更易使用</li>
    <ul>
      <li>响应式 Api 暴露出来</li>
    </ul>
  </ul>
  <h2>二、Vue3新增特性</h2>
  <div>Vue 3 中需要关注的一些新功能包括：</div>
  <ul>
    <li>framents</li>
    <ul>
      <li>在 Vue3.x 中，组件现在支持有多个根节点</li>
    </ul>
    <li>Teleport</li>
    <li>composition Api</li>
    <ul>
      <li>composition Api，也就是组合式api，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理</li>
    </ul>
    <li>createRenderer</li>
  </ul>
  <script>
    // Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，就有点像哆啦A梦的“任意门”

    // 在vue2中，像 modals,toast 等这样的元素，如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难

    // 通过Teleport，我们可以在组件的逻辑位置写模板代码，然后在 Vue 应用范围之外渲染它
    // <button @click="showToast" class="btn">打开 toast</button>
    // <!-- to 属性就是目标位置 -->
    // <teleport to="#teleport-target">
    //     <div v-if="visible" class="toast-wrap">
    //         <div class="toast-msg">我是一个 Toast 文案</div>
    //     </div>
    // </teleport>


    // import { createRenderer } from '@vue/runtime-core'

    // const { render, createApp } = createRenderer({
    //   patchProp,
    //   insert,
    //   remove,
    //   createElement,
    //   // ...
    // })

    // export { render, createApp }

    // export * from '@vue/runtime-core'



    // export default {
    //     setup() {
    //         const count = ref(0)
    //         const double = computed(() => count.value * 2)
    //         function increment() {
    //             count.value++
    //         }
    //         onMounted(() => console.log('component mounted!'))
    //         return {
    //             count,
    //             double,
    //             increment
    //         }
    //     }
    // }
  </script>
  <h2>三、非兼容变更</h2>
  <h3>Global API</h3>
  <ul>
    <li>全局 Vue API 已更改为使用应用程序实例</li>
    <li>全局和内部 API 已经被重构为可 tree-shakable</li>
  </ul>
  <h3>模板指令</h3>
  <ul>
    <li>组件上 v-model 用法已更改</li>
    <li><template v-for>和 非 v-for节点上key用法已更改</li>
    <li>在同一元素上使用的 v-if 和 v-for 优先级已更改</li>
    <li>v-bind="object" 现在排序敏感</li>
    <li>v-for 中的 ref 不再注册 ref 数组</li>
  </ul>
  <h3>组件</h3>
  <ul>
    <li>只能使用普通函数创建功能组件</li>
    <li>functional 属性在单文件组件 (SFC)</li>
    <li>异步组件现在需要 defineAsyncComponent 方法来创建</li>
  </ul>
  <h3>渲染函数</h3>
  <ul>
    <li>渲染函数API改变</li>
    <li>$scopedSlots property 已删除，所有插槽都通过 $slots 作为函数暴露</li>
    <li>自定义指令 API 已更改为与组件生命周期一致</li>
    <li>一些转换 class 被重命名了</li>
    <li>组件 watch 选项和实例方法 $watch不再支持点分隔字符串路径，请改用计算函数作为参数</li>
    <li>在 Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。VUE3.x 现在使用应用程序容器的 innerHTML。</li>
  </ul>
  <h3>其他小改变</h3>
  <ul>
    <li>destroyed 生命周期选项被重命名为 unmounted</li>
    <li>beforeDestroy 生命周期选项被重命名为 beforeUnmount</li>
    <li>[prop default工厂函数不再有权访问 this 是上下文</li>
    <li>自定义指令 API 已更改为与组件生命周期一致</li>
    <li>data 应始终声明为函数</li>
    <li>来自 mixin 的 data 选项现在可简单地合并</li>
    <li>attribute 强制策略已更改</li>
    <li>一些过渡 class 被重命名</li>
    <li>组建 watch 选项和实例方法 $watch不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。</li>
    <li><template> 没有特殊指令的标记 (v-if/else-if/else、v-for 或 v-slot) 现在被视为普通元素，并将生成原生的 <template> 元素，而不是渲染其内部内容。</li>
    <li>在Vue 2.x 中，应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项，则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML，这意味着容器本身不再被视为模板的一部分。</li>
  </ul>
  <h3>移除 API</h3>
  <ul>
    <li>keyCode 支持作为 v-on 的修饰符</li>
    <li>$on，$off和$once 实例方法</li>
    <li>过滤filter</li>
    <li>内联模板 attribute</li>
    <li>$destroy 实例方法。用户不应再手动管理单个Vue 组件的生命周期。</li>
  </ul>
</body>
</html>